<style lang="less">
    @import '~vux/src/styles/1px.less';

    .Router {
        position: absolute;
        width: 100%;
        transition: all .5s ease;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        &.fromMicroProgram{
            top: -1.36rem;
        }
    }

    .slide-left-leave-active, .slide-right-leave-active {
        display: none;
    }

    .slide-left-enter {
        opacity: 0;
        -webkit-transform: translate(100%, 0);
        transform: translate(100%, 0);
    }

    .slide-right-enter {
        opacity: 0;
        -webkit-transform: translate(-100%, 0);
        transform: translate(-100% 0);
    }

</style>
<template>
    <div style="height: 100%">
        <transition :name="transitionName" style="position: relative">
            <keep-alive>
                <router-view class="Router" :class="fromMicroProgram ? 'fromMicroProgram' : ''" :style="interactive.statusBarHeight.height" v-wechat-title="$route.meta.title"
                             @img-set=''></router-view>
            </keep-alive>
        </transition>
    </div>
</template>
<script>
    import {SET_WX} from "store/wx";
    import {USER_SIGNIN} from 'store/user'
    import {SETCONFIG} from "store/config";
    import {UPDATE_ENVIRONMENT} from 'store/router'
    import {mapActions, mapState} from 'vuex'

    export default {
        name: 'app',
        data() {
            return {
                transitionName: '',
              fromMicroProgram: false
            }
        },
        created(){
            this.$router.isToNext = true
            if(this.$route.query.from == 'App'){
                this.UPDATE_ENVIRONMENT(true)
            }
        },
        mounted() {
            this.configManage();
        },
        methods:{
            ...mapActions([SET_WX,SETCONFIG, USER_SIGNIN,UPDATE_ENVIRONMENT]),

            //获取config配置
            configManage(){
                this.$ajax.finance.configManage()
                    .then((res)=>{
                        for(let item in res.body.content){
                            if(item != 'drawbackAccountBank' && item != 'drawbackAccountName' && item != 'drawbackAccountNumber' && item != 'iosDownloadUrl' && item != 'androidDownloadUrl' ){
                                res.body.content[item] = Number(res.body.content[item])
                            }
                        }
                        this.SETCONFIG(res.body.content);
                    })
            },
            //获取个人信息
            gerInFo() {
                if(this.comJS.getCookie('t') && !localStorage.getItem('user')){
                    this.$ajax.inFo.queryIdentityInfo()
                        .then((res) => {
                            this.USER_SIGNIN(res.body.content)
                        })
                }
            },
        },

        watch: {
            '$route'(to, from) {
                    let isBack = this.$router.isBack;  //  监听路由变化时的状态为前进还是后退
                    if (isBack) {
                        this.transitionName = 'slide-right'
                        this.$router.isToNext = false
                    } else {
                        this.transitionName = 'slide-left'
                        this.$router.isToNext = true
                    }
                this.$router.isBack = false
            },
            'interactive.statusBarHeight':function () {
                if(this.$route.matched[1].name=== "homeIndex"){
                    this.comJS.refreshMainTopTwo()
                }else{
                    this.comJS.refreshMainTop()
                }
            },
            'interactive.refreshUserInfo':function () {
                if(this.interactive.refreshUserInfo.flang){
                    this.gerInFo();
                }
            }
        },
        computed:mapState({interactive:state=>state.interactive})
    }
</script>